<template>
  <view class="nav">
    <scroll-view class="nav-scroll" scroll-x>
		<view class="nav-item" :class="{active: activeIndex === ''}"  @tap="handleNavTap('','')">
        全部
      </view>
      <view class="nav-item" :class="{active: activeIndex === index}" v-for="(item, index) in clist" :key="item.id" @tap="handleNavTap(index,item.id)">
        {{ item.name }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: ''
    }
  },
  props:{
	clist:{
		type:Array,
		default:()=>[]
	}
  },
  methods: {
    handleNavTap(index,id) {
      this.activeIndex = index
	  this.$emit('tabClick',id)
    }
  }
}
</script>

<style>
.nav {
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

.nav-scroll {
  white-space: nowrap;
}

.nav-item {
  display: inline-block;
  padding: 0 10px;
  line-height: 50px;
  font-size: 28rpx;
  color: #333;
}

.nav-item.active {
  color: #f00;
}
</style>